<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="header">
        <el-radio-group
          v-model="house"
          class="filter-item"
          @change="onHouseChange">

          <el-radio-button
            v-for="item in houses"
            :disabled="item.disabled"
            :key="item.id"
            :label="item.id">
            {{ item.text }}
          </el-radio-button>
        </el-radio-group>

        <div class="actions">
          <el-button
            class="filter-item"
            type="success"
            icon="el-icon-plus"
            @click="onAdd" >
            添加
          </el-button>
        </div>
      </div>
    </div>

    <el-table v-loading="loading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column type="index" width="60" align="center"/>
      <el-table-column align="center" label="ID" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="120" label="逆变器型号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.model }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100" label="老化次数" align="center">
        <template slot-scope="{row}">
          <!-- <span>{{ row.agingTimes }}</span> -->
          <span>{{ row.agingLower }}</span>
          <span class="line">/</span>
          <span>{{ row.agingUpper }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="120" label="功率范围(W)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.powerLower }}</span>
          <span class="line">/</span>
          <span>{{ row.powerUpper }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="120" label="设定电压(V)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.voltage }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="120" label="电压范围(V)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.voltageLower }}</span>
          <span class="line">/</span>
          <span>{{ row.voltageUpper }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="120" label="设定电流(A)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.current }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="120" label="电流范围(A)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.currentLower }}</span>
          <span class="line">/</span>
          <span>{{ row.currentUpper }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="140" label="设定时长(小时)" align="center">
        <template slot-scope="{row}">
          <span>{{ row.duration }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="{row}">
          <el-button type="success" size="small" icon="el-icon-edit" @click="onEdit(row)">
            编辑
          </el-button>

          <el-button type="danger" size="small" icon="el-icon-video-pause" @click="onDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="设备配置预设"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-form ref="form" :model="form" label-width="150px" :rules="rules">
        <input v-model="form.id" type="hidden">

        <el-form-item label="逆变器型号" prop="model">
          <el-col :span="11">
            <el-input v-model="form.model" />
          </el-col>
        </el-form-item>
        <el-form-item label="功率范围（W）">
          <el-col :span="11">
            <el-input placeholder="" v-model="form.powerLower">
              <template slot="prepend">下限</template>
            </el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input placeholder="" v-model="form.powerUpper">
              <template slot="prepend">上限</template>
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="设定时间（小时）" prop="duration">
          <el-col :span="11">
            <el-input v-model="form.duration" />
          </el-col>
        </el-form-item>
        <el-form-item label="设定电压（V）" prop="voltage">
          <el-col :span="11">
            <el-input v-model="form.voltage" />
          </el-col>
        </el-form-item>

        <el-form-item label="电压范围（V）" prop="voltageScope">
          <el-col :span="11">
            <el-input placeholder="" v-model="form.voltageLower">
              <template slot="prepend">下限</template>
            </el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input placeholder="" v-model="form.voltageUpper">
              <template slot="prepend">上限</template>
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="设定电流（A）" prop="current">
          <el-col :span="11">
            <el-input v-model="form.current" />
          </el-col>
        </el-form-item>

        <el-form-item label="电流范围（A）" prop="currentScope">
          <el-col :span="11">
            <el-input placeholder="" v-model="form.currentLower">
              <template slot="prepend">下限</template>
            </el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input placeholder="" v-model="form.currentUpper">
              <template slot="prepend">上限</template>
            </el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="老化次数" prop="agingScope">
          <el-col :span="11">
            <el-input placeholder="" v-model="form.agingLower">
              <template slot="prepend">下限</template>
            </el-input>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input placeholder="" v-model="form.agingUpper">
              <template slot="prepend">上限</template>
            </el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  findAll,
  add as addConfig,
  edit as updateConfig,
  deleteById as deleteConfig
} from '@/api/config'

export default {
  name: 'Configs',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialogVisible: false,
      houses: [
        {id: 'A01', text: '老化房A01', disabled: true},
        {id: 'A02', text: '老化房A02', disabled: true},
        {id: 'A03', text: '老化房A03', disabled: false},
        {id: 'A04', text: '老化房A04', disabled: false},
      ],
      house: 'A03',

      form: {
        voltage: '',
        powerUpper: '',
        powerLower: '',
        voltageUpper: '',
        voltageLower: '',
        current: '',
        currentUpper: '',
        currentLower: '',
        duration: '',
        agingUpper: '',
        agingLower: '0',
        model: ''
      },
      loading: false,

      defaultProps: {
        children: 'children',
        label: 'text'
      },

      search: '',

      rules: {
        model: [
          { required: true, message: '请输入型号', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '请输入老化时间', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        agingTimes: [
          { required: true, message: '请输入老化次数', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        voltage: [
          { required: true, message: '请输入老化电压', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        voltageUpper: [
          { required: true, message: '请输入电压上限', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        voltageLower: [
          { required: true, message: '请输入电压下限', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        current: [
          { required: true, message: '请输入老化电流', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        currentUpper: [
          { required: true, message: '请输入电流上限', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ],
        currentLower: [
          { required: true, message: '请输化电流下限', trigger: 'blur' },
          // { type: 'number', message: '必须为数字值'}
        ]
      },

      tableData: []
    }
  },
  created() {
    this.fetchList();
  },
  methods: {
    fetchList() {
      this.loading = true

      findAll(this.house).then(res => {
        const rows = res.data.data
        rows.forEach(row => row.duration = row.duration / 3600)
        this.tableData = rows
      }).finally(() => {
        this.loading = false
      })
    },

    onDelete(row) {
      this.$confirm('确认要删除？').then(() => {
        deleteConfig(row.id).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })

          this.fetchList()
        });
      })
    },

    onEdit(row) {
      this.form = row

      this.dialogVisible = true
    },

    onAdd() {
      this.form = {}
      this.dialogVisible = true
    },

    onHouseChange(house) {
      this.fetchList();
    },

    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false

        this.loading = true

        let params = Object.assign({}, this.form)
        params.duration = params.duration * 3600;
        params.house = this.house;    // 当前老化房

        if (params.id) {
          updateConfig(params).then(res => {
            this.$message({
              message: '编辑成功！',
              type: 'success'
            })

            this.dialogVisible = false
            this.fetchList()
          }).finally(() => {
            this.loading = false
          })
        } else {
          addConfig(params).then(res => {
            this.$message({
              message: '创建成功！',
              type: 'success'
            })

            this.dialogVisible = false
            this.fetchList()
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .header {
    display: flex;

    .actions {
      flex: 1;
      text-align: right;
    }
  }

  .line {
    text-align: center;
    font-weight: bold;
  }
</style>
